<template>
	<view class="wrapper">
		<view class="gradient-box">
			<view style="display: flex;align-items: center;padding: 10px 0;">
				<!-- <view><u-icon :name="versionIcon" :size="54"></u-icon></view>
				<view  class="versionTitle"  @click="openPicker" >
					{{versionValue}}<u-icon name="arrow-down" :size="36"></u-icon>
				</view> -->
			</view>
			<uv-picker ref="picker" :columns="columns" @confirm="confirm" mode="bottom"></uv-picker>
			
			<view class="banner-box">
				  <u-swiper :list="bannerList"></u-swiper>
			</view>
		</view>
		<view class="icon-link-wrapper">
			<u-grid :col="4" :border="false">
				<template v-for="(item, index) in iconLinklist">
					<u-grid-item @click="navTo(item.routerLink)" v-if="item.isShow">
						<u-icon :name="item.imageUrl" :size="54"></u-icon>
						<view class="grid-text margin-t8">{{ item.text }}</view>
					</u-grid-item>
				</template>	
			</u-grid>
		</view>
		
		<view class="notice-wrapper">
			<view class="notice-box"><u-notice-bar type="primary " :list="noticelist" bg-color="#f5f5f5" color="#7B4EFF" :more-icon="true"></u-notice-bar></view>
		</view>
		
		<view class="data-wrapper">
			<view class="data-card-wrapper">
				<u-row gutter="16" justify="space-between">
					<u-col span="3">
						<view class="">今日交易(元)</view>
					</u-col>
					<u-col span="3">
						<view class="gradient-button" @click="navTo('/pages/home/trading/index')">去看看</view>
					</u-col>
				</u-row>
				<view class="data-card">
					<view class="data-num">{{todayTrxAmount}}</view>
					<view class="">
						<view style="display: flex;justify-content: start;">
							<view class="theme-button">昨日：{{yesterdayTrxAmount}}</view>
							<view class="theme-button">本月：{{monTrxAmount}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="data-card-wrapper">
				<u-row gutter="16" justify="space-between" class="data-card-wrapper">
					<u-col span="3">
						<view class="">今日收益(元)</view>
					</u-col>
					<u-col span="3">
						<view class="gradient-button" @click="navTo('/pages/home/home/earnings-info')">去看看</view>
					</u-col>
				</u-row>
				<view class="data-card">
					<view class="data-num">{{todayIncome}}</view>
					<view class="">
						<view style="display: flex;justify-content: start;">
							<view class="theme-button">昨日：{{yesterdayIncome}}</view>
							<view class="theme-button">本月：{{monIncome}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<m-s-footer :tabIdx="0" v-if="$store.state.user.isSpecificAccount"></m-s-footer>
		<m-footer :tabIdx="0" v-else></m-footer>
	</view>
</template>

<script>
	import {
		homeData,queryPageConfigure,homeDataOne
	} from '_a/home';
	import {
		getInfo
	} from '_a/policy-config';
	export default {
		data() {
			return {
				msgNum: 0,
				type: 'warning',
				noticelist: [''],
				iconLinklist:[{
					routerLink: '/pages/home/home/merch-bind-info',
					imageUrl: require('@/common/images/home-icon/1.png'),
					routerType: 'path',
					text: '我的商户',
					isShow: true
				},{
					// routerLink: '/pages/home/com-route/com-route',
					routerLink: '/pages/home/terminal/index',
					imageUrl: require('@/common/images/home-icon/2.png'),
					routerType: 'path',
					text: '机具管理',
					isShow: false,
				}
				// ,{
				// 	routerLink: '/pages/home/myAgent/index',
				// 	imageUrl: require('@/common/images/home-icon/3.png'),
				// 	routerType: 'path',
				// 	text: '商户分享',
				// 	isShow: true,
				// }
				// ,{
				// 	routerLink: '/pages/home/myAgent/index',
				// 	imageUrl: require('@/common/images/home-icon/4.png'),
				// 	routerType: 'path',
				// 	text: '终端采购',
				// 	isShow: true,
				// }
				,{
					routerLink: '/pages/home/myAgent/index',
					imageUrl: require('@/common/images/home-icon/5.png'),
					routerType: 'path',
					text: '我的代理',
					isShow: true,
				},{
					routerLink: '/pages/home/myAgent/addAgent',
					imageUrl: require('@/common/images/home-icon/6.png'),
					routerType: 'path',
					text: '新增代理商',
					isShow: false,
				},{
					routerLink: '/pages/home/invitation/index',
					imageUrl: require('@/common/images/home-icon/7.png'),
					routerType: 'path',
					text: '邀请注册',
					isShow: false,
				},{
					// routerLink: '/pages/home/myAgent/index',
					imageUrl: require('@/common/images/home-icon/8.png'),
					routerType: 'path',
					text: 'TOP10',
					isShow: false,
				},{
					routerLink: '/pages/home/home/trading-info',
					imageUrl: require('@/common/images/home-icon/tradeDetail.png'),
					routerType: 'path',
					text: '交易明细',
					isShow: true,
				},{
					routerLink: '/pages/home/policy/changeMerchRate',
					imageUrl: require('@/common/images/home-icon/updateFee1.png'),
					routerType: 'path',
					text: '费率设置',
					isShow: true,
				},{
					routerLink: '/pages/home/policy/changeCommFee',
					imageUrl: require('@/common/images/home-icon/commfee1.png'),
					routerType: 'path',
					text: '流量卡设置',
					isShow: true,
				},{
					routerLink: '/pages/home/policy/changeServiceFee',
					imageUrl: require('@/common/images/home-icon/serviceFee1.png'),
					routerType: 'path',
					text: '服务费设置',
					isShow: true,
				},{
					routerLink: '/pages/home/com-route/com-route?type=data',
					imageUrl: require('@/common/images/home-icon/dataQuery1.png'),
					routerType: 'path',
					text: '数据查询',
					isShow: true,
				},{
					routerLink: '/pages/home/com-route/com-route?type=policy',
					imageUrl: require('@/common/images/home-icon/setpolicy.png'),
					routerType: 'path',
					text: '政策管理',
					isShow: true,
				}],
				navIndex: 0,
				paramKey: 'homeBannerAgent',
				/* 新版本属性 */
				versionIcon:require('@/common/images/home-icon/versionIcon.png'),
				versionValue:'2022政策返现版',
				versionRange:[
					{ value: 0, label: "2022政策返现版" },
					{ value: 1, label: "足球" },
					{ value: 2, label: "游泳" },
				  ],
				bannerList:[{
					image: require('@/common/images/homeBanner/banner.jpg'),
					title: "",
				  }],
				columns: [
				  	['2022政策返现版', '2023政策返现版', '2024政策返现版']
				],
				//今日交易
				todayTrxAmount:0.0,
				//本月交易
				monTrxAmount:0.0,
				//今日收益
				todayIncome:0.0,
				//本月收益
				monIncome:0.0,
				//昨日交易
				yesterdayTrxAmount:0.0,
				//昨日收益
				yesterdayIncome:0.0
			};
		},
		computed: {
			// bannerList() {
			// 	//  this.$store.getters.bannerHomeList ||
			// 	return [
			// 		{ imgUrl: require('@/common/images/homeBanner/1.jpg') },
			// 	];
			// }
			// //是否存在平行代理数据
			isHasTripartiteData() {
				if (this.$store.getters.userAdminInfo.roles && this.$store.getters.userAdminInfo.roles.includes('pxdls')) {
					//存在平行代理
					return true;
				} else {
					return false;
				}
			}
		},
		created() {
			uni.hideTabBar({});
			// this.getData();
		},
		onLoad() {
			this.getData();
		},
		onShow() {
			this.getNavItemData()
		},
		// 下拉刷新
		async onPullDownRefresh() {
			this.$store.dispatch('getUserDetail').then(async res => {
				await this.getData();
				await this.getNavItemData();
				uni.stopPullDownRefresh();
				this.$tip.toast('刷新成功!', 'success', 500);
			});
		},
		methods: {
			open() {
							this.$refs.datetimePicker.open();
						},
			openPicker() {
							this.$refs.picker.open();
						},
						confirm(e) {
							console.log('confirm', e);
						},
			// 获取数据
			async getData() {
				let that = this;
				this.getNavItemData()
				getInfo(this.paramKey).then(res => {
					if (res.code == 200 && res.data) {
						this.bannerList = JSON.parse(res.data.paramValue);
					}
				});
				if(this.$store.getters.userInfo.info) {
					let agentNo = this.$store.getters.userInfo.info.agentNo;
					queryPageConfigure({"sysType":1,"showType":1,"agentNo":agentNo}).then(res => {
						if(res.code == 200 && res.data && res.data.showContent){
							this.noticelist = res.data.showContent.split(",");
						}else{
							//获取app名称
							let appConfig = this.$store.getters.appConfig || null
							if(appConfig) {
								let appName = appConfig.appName
								let text = `欢迎来到${appName}!一站式管理，为您提供更全面的服务`
								this.noticelist = [text]
							}else{
								let appName = uni.getStorageSync('appName') || '收款宝'
								//没配置显示默认值
								let text = `欢迎来到${appName}!一站式管理，为您提供更全面的服务`
								this.noticelist = [text]
							}
						}
					});
				}
			},
			async getNavItemData() {
				homeData().then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.todayTrxAmount = data.todayTrxAmount;
						this.monTrxAmount = data.monTrxAmount;
						this.todayIncome = data.todayIncome;
						this.monIncome = data.monIncome;
						// this.dataNavList = this.formData(data);
					}
				});
				homeDataOne().then(res => {
					if (res.code == 200) {
						let data = res.data;
						//昨日交易
						this.yesterdayTrxAmount = data.yesterdayTrxAmount,
						//昨日收益
						this.yesterdayIncome = data.yesterdayIncome
					}
				});
			},
			// 格式化请求赋值参数
			formData(data) {
				return this.dataNavList.map(item => {
					item.subList = item.subList.map(subItem => {
						subItem.value = data[subItem.key];
						return subItem;
					});
					return item;
				});
			},
			navTo(path) {
				this.$nav.push({
					path: path
				});
			},
			itemHandle(item) {
				const routeName = item.routerLink;
				if (item.noFinish) {
					return this.$toast('敬请期待!');
				}
				this.$nav.push({
					path: routeName,
					query: item.query || {}
				});
			},
			changeNav(i, title) {
				this.navIndex = i;
				this.navTitle = title;
			},
			toNotice() {
				this.$nav.push({
					path: '/pages/home/notice/notice'
				});
			},
			//轮播跳转
			bannerDetail(item) {
				console.log(item)
				if (item.link) { //跳转地址
					if (item.link.indexOf('http') == -1) {
						this.$nav.push({
							path: item.link
						})
					} else { //跳外部
						window.location.href = item.link
					}
				} else if (item.imageDetailPath) { //跳详情
					this.$storage.setStore("bannerDetail", item.imageDetailPath);
					this.$nav.push({
						path: "/pages/home/home/bannerDetail"
					});
				}
			},
			/*新版本交互js*/
			change(e){
				console.log("e:", e);
			},
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				console.log('confirm', e);
				this.versionValue = e.value[0];
				console.log(this.versionValue)
			}
		}
	};
</script>

<style lang="scss">
	page{
		background: #fff;
	}
	.wrapper{
		padding-bottom: 50px;
	}
	/*头部渐变色box */
	.gradient-box{
		background: $page-linear-bg;
		padding: $uni-spacing-row-sm $uni-spacing-row-base;
		.versionTitle{
			font-size: $uni-font-size-lg;
			padding: $uni-spacing-row-base;
		}
		.banner-box{
			// border: $uni-border-radius-sm solid $themeColor;
			border-radius: 14px;
			height: 32vw;
			position: relative;
			// margin-bottom: $uni-spacing-col-lg;
			overflow: hidden;
		}
	}
	.icon-link-wrapper{
		padding:$uni-spacing-row-sm $uni-spacing-row-base;
	}
	.notice-wrapper{
		padding: $uni-spacing-row-sm $uni-spacing-row-base;
		.notice-box{
			border-radius: $uni-border-radius-xl;
			overflow: hidden;
		}
	}
	.data-wrapper{
		padding: $uni-spacing-row-sm $uni-spacing-row-base;
		.data-card-wrapper{
			margin-top: $uni-spacing-col-lg;
			.data-card{
				margin-bottom: $uni-spacing-col-lg;
				margin-top: $uni-spacing-col-base;
			}
		}
		.data-num{
			
			color:$uni-color-error;
			font-size: $uni-font-size-xl;
			font-weight: bold;
			margin-bottom: $uni-spacing-row-sm;
			padding: $uni-spacing-row-base;
		}
	}
	/*按钮样式 */
	.theme-button{
		background-color:$themeColor ;
		color: #fff;
		padding: 4px 8px;
		min-width: 80px;
		border-radius: 16px;
		margin-right: 10px;
		font-size: $uni-font-size-sm;
	}
	.gradient-button{
		font-weight: 500;
		background: linear-gradient(-90deg, #d2c3fe, #edeaff);
		padding: 6px 0px;
		border-radius: 16px;
		text-align: center;
		font-size: $uni-font-size-sm;
	}

	
	
	
	
	
	
	
	
	/* 旧样式 */
	.top-h {
		padding-top: R(40);
		height: R(400);
		// background: linear-gradient(0deg, #cae0f8 0%, #3d85eb 100%);
		// background-image: url(../../../common/images/home-new/bg-up.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: R(40) R(40) R(40) R(30);

		.user {
			.a-name{
				color: #ffffff;	
			}
			.a-name-image {
				// font-size: R(30);
				// font-family: Source Han Sans CN;
				// font-weight: bold;
				// color: #ffffff;
				width: R(249px);
				height: R(69px);
			}

			.msg {
				image {
					width: R(30);
					height: R(44);
				}
			}
		}

		.notice {
			color: #fff;
			justify-content: flex-start;

			.icon {
				width: R(34);
				height: R(25);
			}

			.icon-Downarrow-R {
				margin-left: auto;
			}
		}
	}

	.home-container {
		padding-bottom: R(140);
	}

	.banner {
		padding: 0 R(25px);
		border-radius: R(10px);
		overflow: hidden;
		margin-bottom: 0.18rem;
		height: R(200);

		.my-swipe {
			// height: 150px;
			width: 100%;
			// &-item{
			//   width:100% !important;
			// }
		}

		.b-image {
			border-radius: 12px;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	}

	.functional-module {
		background-color: #FFFFFF;
		width: 90%;
		margin: R(40) auto;
		margin-top: R(-190px);
		border-radius: R(20);
		box-shadow: R(0px) R(1px) R(10px) R(1px) rgba(137, 203, 254, 0.41);
	}

	.fc-wrap {
		// margin: R(0px) R(41px);
		// padding: R(20px) 0
		// border-radius: R(10px);
		// border-radius: R(20px) R(20px) 0px 0px;
		// background: #f1f6f8;

		// box-shadow: 0px 5px 9px 0px rgba(4, 0, 0, 0.1);
		.floor1-list {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-end;
			margin-bottom: 0;

			.fc-item {
				width: 25%;
				margin: R(20px) 0;
				text-align: center;
				display: flex;
				flex-direction: column;
				text-align: center;
			}

			.fc-item:last-child {
				// margin-bottom: 0;
			}
		}

		.doc {
			image {
				width: R(88px);
				height: R(88px);
			}
		}

		.docx {
			font-size: R(26px);
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #364460;
		}
	}

	.nav {
		padding: R(24);
		justify-content: space-between;
		height: R(240);

		/deep/.uni-swiper-dots-horizontal {
			bottom: -5px;
		}

		/deep/.uni-swiper-wrapper {
			overflow: inherit;
		}

		.item {
			width: 49%;
			height: R(180);
			position: relative;

			.text {
				position: relative;
				z-index: 3;
				padding-left: R(37);
				padding-top: R(20);
			}

			text:nth-child(1) {
				font-size: R(30px);
				font-weight: 500;
				color: #0f3438;
				margin-bottom: R(10);
			}

			text:nth-child(2) {
				font-size: R(26px);
			}

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
		}
	}

	.data-box {
		margin: 0 R(35);
		margin-bottom: R(50px);
		// height: R(205);
		// box-shadow: 0px R(6px) R(10px) 0px rgba(11, 171, 254, 0.2);
		border-radius: R(20);
		color: #595959;
		position: relative;
		overflow: hidden;
		padding: R(30);
		background-color: #FFFFFF;
		box-shadow: 0 R(1px) R(10px) R(1px) rgba(137, 203, 254, 0.41);

		.nav-box {
			background: #E9EEF5;
			margin-bottom: R(20);

			text {
				display: inline-block;
				padding: R(10) 0;
				color: #1a1a1a;
				width: 25%;
				text-align: center;
				font-size: R(28px);
			}

			.active {
				// border-bottom-right-radius: R(20);
				border: 2px solid #008EFD;
				background-color: #FFFFFF;
			}

			// .a0 {
			// 	border-top-right-radius: R(60);
			// 	color: #fff;
			// 	background: linear-gradient(to right, #a8b2f7, #b1baf2) !important;
			// }

			// .a1 {
			// 	border-top-left-radius: R(60);
			// 	border-top-right-radius: R(60);
			// 	color: #fff;
			// 	background: linear-gradient(to right, #afbdf8, #b8cbf7) !important;
			// }

			// .a2 {
			// 	border-top-left-radius: R(60);
			// 	border-top-right-radius: R(60);
			// 	color: #fff;
			// 	background: linear-gradient(to right, #b7cbf7, #bed5f7) !important;
			// }

			// .a3 {
			// 	border-top-right-radius: 0 !important;
			// 	border-top-left-radius: R(60) !important;
			// 	background: linear-gradient(to right, #bfd6f8, #c3ddf8);
			// 	color: #fff;
			// }

			.noFirst {}

			.last {}
		}

		.d-bg-b {
			// padding: R(40) R(22) R(24);
			// background: linear-gradient(to right, #a9b3f7, #c3ddf8);
		}

		.p-title {
			position: absolute;
			// background: url(@/common/images/home-icon/quan.png);
			background-size: 100% 100%;
			top: R(-62);
			left: 50%;
			transform: translateX(-50%);
			width: R(484);
			height: R(67);
			line-height: R(67);
			font-size: R(30px);
			font-weight: bold;
			color: #ffffff;
			text-align: center;
		}

		.l-box {
			margin-bottom: R(35);
			justify-content: space-between;

			.d-box {
				padding: R(60) 0 R(20);
				width: 31%;
				text-align: center;
				background: #fff;
				// box-shadow: 0px R(10px) R(18px) 0px rgba(64, 93, 174, 0.18);
				border-radius: R(20px);
				box-shadow: 0 R(1px) R(10px) R(1px) rgba(137, 203, 254, 0.41);
				position: relative;

				.image—top {
					position: absolute;
					top: 0;
					left: 0;
					width: R(43px);
					height: R(42px);
					background-repeat: no-repeat;
					background-size: 100% 100%;
					color: #FFFFFF;
					font-size: R(20px);
				}
			}

			.tradingBox {
				width: 48%;
			}

			.title {
				margin-bottom: R(30);
				font-size: R(20px);
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #909BB3;
			}

			.num {
				font-size: R(36px);
				font-family: Source Han Sans CN;
				// font-weight: bold;
				color: #0d0d0d;
			}

			.margin1 {
				margin-bottom: R(30);
			}

			.setMargin2 {
				margin-right: R(30);
			}
		}

		.tips {
			font-size: R(26px);
			font-weight: 400;
			color: #435f9c;
			margin: R(30) 0;
			.nav-title{
				position: relative;
				text-indent: R(20px);
				color: #364460;
				font-size: R(30);
			}

			.nav-title::before {
				content: "";
				position: absolute;
				display: block;
				left: 0;
				width: R(10px);
				height: R(35px);
				background-color: #008EFD;
				margin-top: R(3px);
				border-radius: R(10);
			}

			.info {
				font-size: R(20px);
				color: #8F9BB2;
			}
		}

		.r-box {
			width: R(266);
			height: R(266);
			position: relative;

			.m-img {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				width: 100%;
				height: 100%;
			}

			.content {
				z-index: 1;
				text-align: center;
			}
		}
	}

	.setMargin {
		margin-top: 20upx;
	}
</style>
